<template>
    <div>
        <header id="header" style="position:relative;">
            <div class="header-content">
                <div style="width: 400px;display:flex">
                  <img src="/img/logo.png" style="width: 96px;">
                </div>
                <div class="qr-code-container">
                  <div class="qr-code">
                    <!-- 二维码图片 -->
                    <img src="img/appcode.png" alt="QR Code" style="width: 128px;">
                  </div>
                  <p>APP下载</p>
                </div>
            </div>
        </header>
        <nav>
            <ul id="myList" >
              <li v-for="(item,index) in items" :key="index" @click="handle(index)">
                <a href="#" :class="this.currentIndex== index?'active':'' " :css="index" :css1="this.currentIndex"><span :class="this.currentIndex == index?'activeSelected':'' "></span>{{ item.text }}</a>
              </li>
            </ul>
          </nav>
          <div class="content-wrapper" style="margin: 0 auto;width:1300px">
            <section id="content" style="display: flex;">
              <div style="width:930px;">
                <div class="carousel-container" style="margin-top:50px">
                      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"  data-bs-interval="1000" data-wrap="true" indicator="ture" data-bs-isIndicator="true">
                        <div class="carousel-indicators">
                          <button type="button" data-bs-target="#carouselExampleIndicators" :data-bs-slide-to="key"  :class="key==0?'active':''" :aria-current="key==0?'true':''" v-for="(value, key) in bannerlist" :key="key"></button>
                      
                        </div>
                        <div class="carousel-inner">
          
                      <div  :class="key==0?'carousel-item active':'carousel-item'" v-for="(value, key) in bannerlist" :key="key">
                            <a :href="'https://www.cailianxinwen.com/app/news/shareNewsDetail?newsid='+value.id+'&type=1'"  target="_self">
                                <img :src="value.titleimg" class="d-block w-100" alt="">  
                                <div class="carousel-caption d-none d-md-block">
                            <p class="carousel-title">{{value.title}}</p>
                             </div></a>
                            </div>
                        </div>
                 
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                      </div>
                    </div>
                <div style="width: 100%;margin-top:20px">
                  <p class="title">新闻</p>
                  <div class="left-content">
                    <ul>
                      <li v-for="(value, key) in newslist" :key="key">
                        <a :href="'https://www.cailianxinwen.com/app/news/shareNewsDetail?newsid='+value.id+'&type=1'">
                          <div class="left-content-li">
                            <div class="left-content-li-img">
                              <img :src="value.titleimg" class="news-img">
                            </div>
                            <div >
                              <div class="news-title">{{value.title}}</div>
                              <div class="news-other">
                                <span>来源：{{value.source}}</span>
                                <span>时间{{value.posttime}}</span>
                              </div>
                            </div>
                          </div>
                        </a>
                      </li>
                    </ul>
            
                  </div>
                </div>
              </div>
              <div style="width:330px;display:flex;margin-top:50px;flex-direction: column;position: relative;margin-left:10px">
                <div style="width: 100%;">
                  <p class="title">专题</p>
                  <div class="right-content" id="zt">
                    <ul>
            
                      <li v-for="(value, key) in zt" :key="key">
                        <a :href="'https://www.cailianxinwen.com/app/news/shareNewsDetail?newsid='+value.id+'&type=1'" ><img :src="value.titleimg"><p>{{value.name}}</p></a>
                      </li>
                    </ul>
                  </div>
                </div>
            
                <div style="width: 100%;">
                  <p class="title">视频专辑</p>
                  <div class="right-content" id="zj">
            
                    <ul>
                     <li v-for="(value, key) in other1" :key="key">
                      <a :href="'https://www.cailianxinwen.com/app/news/shareNewsDetail?newsid='+value.id+'&type=1'" ><img :src="value.screenshot"><p>{{value.name}}</p></a>                    </li>
                    <li v-for="(value, key) in other2" :key="key">
                      <a :href="'https://www.cailianxinwen.com/app/news/shareNewsDetail?newsid='+value.id+'&type=1'" ><img :src="this.getimg(value.titleimg)"><p>{{value.name}}</p></a>
                    </li>
                    </ul>
                  </div>
                </div>
              </div>
            </section>
            </div>
    </div>
  </template>
  
  <script>

import { toRaw } from '@vue/reactivity'
import service from '@/utils/request'
import { ref, onMounted } from 'vue';
import { Carousel } from 'bootstrap';


  export default {

 mounted() {
    new Carousel(document.getElementById('carouselExampleControls'), {
      // 可以在这里配置Carousel的选项
      isIndicator:true
    });
  },
 
    data(){
        return{
          currentIndex:0,
            bannerlist:[],
            other1:[],
            other2:[],
            zt:[],
            type:1,
            newslist:[],
            page:1,
            items: [
        { id: 1, text: '首页' },
        { id: 38, text: '时政' },
        { id: 43, text: '天下' },
        { id: 68, text: '经济' },
        { id: 45, text: '文化' },

      ],
      windowHeight: document.body.clientHeight,
        }
    },
    watch:{
      windowHeight(val) {
      console.log('实时屏幕高度：', val, this.windowHeight)
    },
    },
    created() {
      this.banners();
      this.rightdata();
      this.zhuanti();
      this.news()
  },
  mounted(){
    window.addEventListener("scroll", this.scrolling);
  },
  beforeDestroy() {
    // 移除事件监听
    this.$el.removeEventListener('scroll', this.handleScroll);
  },
    methods:{
      scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop;
      console.log("header 滚动距离 ", scrollTop);
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop;

      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;

      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        //你想做的事情
        console.log("header  你已经到底部了");
      }
      if (scrollTop >151*10*this.page) {
        console.log('xxx')
        this.news(this.type)
        this.page++
        //console.log("header 滚动条向上滚动了！");
      } else {
      //  console.log("header  滚动条向下滚动了！");
      }
      // 判断是否到了最顶部
      if (scrollTop <= 0) {
        console.log("header 到了最顶部")
      } 
    },

      handle:function(item){
                
          this.currentIndex = item; 
                console.log(this.items[item].id)
                this.type=this.items[item].id
                this.news(this.type)
                this.newslist=[]
                this.page=1
      },
        getimg:function(item){
          let _img=item.split(',')
          return _img[0]
        },
        news:function(e=1){
          service.get('https://www.cailianxinwen.com/app/news/getNewsByChanneAndColumnlN?channels='+e+'&pagenow='+this.page).then(response => {         
                this.newslist=this.newslist.concat(response.datas)
                console.log(response)
            }).catch(function (error) {
                console.log(error);
            });
        },
        zhuanti:function(){
          service.get('https://www.cailianxinwen.com/app/news/getKeyNewsToPolitical').then(response => {         
                this.zt=response.topicNewsList
                console.log(response)
            }).catch(function (error) {
                console.log(error);
            });
        },
        banners:function()
        {
            service.get('https://www.cailianxinwen.com/app/news/getFocusNews?channelid=1').then(response => {         
                this.bannerlist=response
               // console.log(response)
            }).catch(function (error) {
                console.log(error);
            });
        },
        rightdata:function(){
          service.get('https://www.cailianxinwen.com/app/news/getOtherNews').then(response => {        
               let key1="videoid"
               let key2="titleimg"
               let arr1=[]
               let arr2=[]
               let c=0
               let b=0
               $.each(response, function(index, value){
                if(Object.keys(value).includes(key1)){
                    arr1[c]=value
                    c++
                }
                if(Object.keys(value).includes(key2)){
               //   let _img=value.titleimg.split(',')
               arr2[b]=value
               b++
                }
                })
                this.other1=arr1
                this.other2=arr2


            }).catch(function (error) {
                console.log(error);
            });
        },

    },
    name: '',

    computed:{


  

}
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style>
  .carousel-container {
  width: 100%;

  margin: auto;
}
  #header{
    width: 100%;
    height: 90px;
    text-align: center;
    color: #AB1314;
    font-size: 16px;
    font-weight: 600;
}
#header .header-content {
    width: 1300px;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
.logo-box, .themeConfig_chunjie .logo-box, .themeConfig_red .logo-box {
    z-index: 5;
    display: inline-block;
    width: 260px;
    height: 60px;
    padding: 15px 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}


nav{
    background-color: #D70B04;
    width: 100%;
}
nav ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color:  #D70B04;
    max-width: 1300px;
  }
   
  nav ul li {
    float: left;
    width: 130px;
    height: 60px;
  }
   
  nav ul li a {
    width: 130px;
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    color: #fff;
    line-height: 60px;
    vertical-align: middle;
    font-family: SimSun;
    text-align: center;
  }
 nav ul li a:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #A20000;  
  }
  nav ul li a.active {
    background-color: #A20000;
    font-weight: 600;
}
.activeSelected {
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #F2F0F1;
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.header-content{
    display: flex;
    align-items: center;
    width: 100%;

}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  z-index: 15;

}
.qr-code-container{
    position:absolute;
    right: 200px;;
    color: #666;
    cursor:pointer;
}
.qr-code {
    
    position: absolute;
    width: 160px;
    height: 160px;
    top: 36px;
    left: 0px;
    background-color: #fff;
    padding: 15px;
    display: none;
    text-align: center;
    z-index: 4000;
  }
  .qr-code-container:hover .qr-code {
    display: block;
  }

  .carousel-inner .carousel-item {
    height: 450px;
  }
  .carousel-inner .carousel-item img {
    width: 100%;
    height: 100%;
  }
  .title{
    width: 100%;
    height: 42px;
    font-size: 28px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    color: rgba(3,3,3,1);
    margin: 10px 20px;
  }
  .right-content{
    border-top: 8px solid #D70005;
    border-bottom: 1px solid rgba(214,214,214,1);
    background-color: #fff;
    height: 100%;
  }
  .left-content{
    border-top: 8px solid #D70005;
    border-bottom: 1px solid rgba(214,214,214,1);
    background-color: #fff;
  }
  .left-content ul li{
    border-bottom: 1px solid #f1f1f1;
     list-style-type: none;
  }
  .left-content ul li a{
    color: #000;
    text-decoration: none;
  }
  .left-content-li{
    display: flex;
    width:100%;
    margin-top:20
  }
  .left-content-li-img{
    position:relative;left:-30;
  }
  .news-img{
    width:248px;height:188px;
    padding: 12px;
  }
  .news-title{
    font-size: 22px;
    font-weight: 600;
    max-height: 130px;
    line-height: 32px;
    width: 520px;
    -webkit-line-clamp: 4;
    height:160px;
    padding:20px 0

  }
  .news-other{
    border-top: 1px dotted #666;width:100%;
    display: flex;
    justify-content: space-between;
    padding: 10 0;
    font-size: 14px;
  }
 .carousel-title{
    background-color: #000;
    opacity: 0.8;
    padding: 1 5px;
    ;
 }
 #zt ul{
  padding-left:0;
 }
 #zt ul li{

float: left;
  list-style-type: none;

  margin: 10 0;
 }
 #zt ul li img{
  width: 328px;
  height:180px;
  border:1px solid #666;
}
#zt ul li a{
color: #000;
text-decoration: none;
}
#zt ul li p{
  text-align: center;
    margin: 2;
}

#zj ul{
  padding-left:0;
 }
 #zj ul li{

float: left;
  list-style-type: none;

  margin: 10 0;
 }
 #zj ul li img{
  width: 328px;
  height:180px;
  border:1px solid #666;
}
#zj,#zj ul li a{
color: #000;
text-decoration: none;
}
#zj ul li p{
  text-align: center;
    margin: 2;
}
  </style>
  